<template>
  <div id="ht-timepicker">
    <DatePicker
      :selected-date="date"
      :auto-close="autoClose"
      @onSelectDay="handleDateChange"
    />
    <HourPicker
      v-if="showHour"
      :selected-hour="hour"
      :auto-close="autoClose"
      :hour-interval="hourInterval"
      :custom-hours="customHours"
      style="margin-left: 10px"
      @onSelectHour="handleHourChange"
    />
    <MinitePicker
      v-if="showMinite"
      :selected-minite="minite"
      :auto-close="autoClose"
      style="margin-left: 10px"
      @onSelectMinite="handleMiniteChange"
    />
    <FuncBtns
      v-if="showBtns.length"
      :btns="showBtns"
      :btns-at-new-line="btnsAtNewLine"
      @onBtnClick="handleBtnEvent"
    />
  </div>
</template>

<script>
import DatePicker from './DatePicker';
import HourPicker from './HourPicker';
import MinitePicker from './MinitePicker';
import FuncBtns from './FuncBtns';
import dayjs from 'dayjs';

export default {
  name: 'VueDateTimePicker',
  components: { DatePicker, HourPicker, MinitePicker, FuncBtns },
  model: {
    prop: 'value',
    event: 'onChange',
  },
  props: {
    // 格式 YYYY-MM-DD HH:mm
    value: {
      type: String,
    },
    // 是否选中关闭弹框
    autoClose: {
      type: Boolean,
      default: true,
    },
    showHour: {
      type: Boolean,
      default: true,
    },
    // 默认不显示分钟
    showMinite: {
      type: Boolean,
      default: false,
    },
    // 统一控制按钮显影且按排序渲染
    showBtns: {
      type: Array,
      default: () => ['query', 'left', 'right', 'refresh'],
    },
    // btn另起一行
    btnsAtNewLine: {
      type: Boolean,
      default: false,
    },
    // 小时间隔(1,2,3,4,6,8,12)
    hourInterval: {
      type: Number,
      default: 1,
    },
    // 分钟间隔
    miniteInterval: {
      type: Number,
      default: 5,
    },
    // 自定义时间显示内容，如['08','20']
    customHours: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      systemDate: '', // 系统时间
    };
  },
  computed: {
    // 日期
    date() {
      return this.value.substr(0, 10);
    },
    // 小时
    hour() {
      return this.value.substr(11, 2);
    },
    // 分钟
    minite() {
      return this.value.substr(14, 2);
    },
  },
  created() {},
  mounted() {
    if (!this.value) {
      // 如果没传时间则默认传系统时间
      const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
      this.$emit('onChange', time);
    }
  },
  watch: {},
  methods: {
    // 日期变化
    handleDateChange(val) {
      this.$emit('onChange', val + ' ' + this.hour + ':' + this.minite);
    },
    // hour变化
    handleHourChange(val) {
      this.$emit('onChange', this.date + ' ' + val + ':' + this.minite);
    },
    handleMiniteChange(val) {
      this.$emit('onChange', this.date + ' ' + this.hour + ':' + val);
    },
    // 按钮事件
    handleBtnEvent(type) {
      switch (type) {
        case 'left':
          this.hourChange('left');
          break;
        case 'right':
          this.hourChange('right');
          break;
        case 'query':
          this.$emit('onQuery', this.value);
          break;
        case 'refresh':
          this.$emit('onRefresh');
          break;
        default:
          break;
      }
    },
    // 左右小时切换(按显示的时间间隔来)
    hourChange(direction) {
      if (this.customHours.length) {
        // 如果是自定义时间
        const index = this.customHours.findIndex(item => item === this.hour);
        const len = this.customHours.length;
        let hh, hhTs, newTime;
        if (index === 0 && direction === 'left') {
          // 向左切一天
          const leftDateTs =
            new Date(this.date + ' 00:00:00').getTime() - 24 * 3600 * 1000;
          hh = parseInt(this.customHours[len - 1]);
          hhTs = hh * 3600 * 1000;
          newTime = dayjs(leftDateTs + hhTs).format('YYYY-MM-DD HH:mm');
        } else if (index === len - 1 && direction === 'right') {
          // 向右切一天
          const rightDateTs =
            new Date(this.date + ' 00:00:00').getTime() + 24 * 3600 * 1000;
          hh = parseInt(this.customHours[0]);
          hhTs = hh * 3600 * 1000;
          newTime = dayjs(rightDateTs + hhTs).format('YYYY-MM-DD HH:mm');
        } else {
          // 当天内的时间切换
          const nowDateTs = new Date(this.date + ' 00:00:00').getTime();
          hh =
            direction === 'left'
              ? parseInt(this.customHours[index - 1])
              : parseInt(this.customHours[index + 1]);
          hhTs = hh * 3600 * 1000;
          newTime = dayjs(nowDateTs + hhTs).format('YYYY-MM-DD HH:mm');
        }
        this.$emit('onChange', newTime);
        this.$emit('onRight', newTime);
      } else {
        // 处理正规间隔的情况
        let ts = new Date(this.value).getTime();
        let newTime;
        ts =
          direction === 'left'
            ? ts - this.hourInterval * 60 * 60 * 1000
            : ts + this.hourInterval * 60 * 60 * 1000;
        newTime = dayjs(ts).format('YYYY-MM-DD HH:mm');
        this.$emit('onChange', newTime);
        this.$emit('onLeft', newTime);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#ht-timepicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: #fff;
}
</style>
